<template>
    <div>
      <h1>{{ message }}</h1> <!-- 显示从后端获取的 message -->
      <button @click="fetchData">Get Data</button> <!-- 点击按钮触发 fetchData 方法 -->
    </div>
  </template>
  
  <script>
  import axios from 'axios'; // 导入 axios 库
  
  export default {
    name: 'MyComponent', // 组件名称
    data() {
      return {
        message: '', // 用于保存从后端获取的数据
      };
    },
    methods: {
      async fetchData() {
        try {
          // 发送 GET 请求到后端 API
          const response = await axios.get('http://localhost:5000/api/v1/users');
          // 如果后端返回数据, 更新 message
          if (response.data && response.data.message) {
            this.message = response.data.message;
          } else {
            this.message = 'No message received from backend'; // 默认消息
          }
        } catch (error) {
          // 如果请求出错，打印错误信息
          console.error('Error fetching data:', error);
          this.message = 'Error fetching data from backend'; // 错误时显示消息
        }
      },
    },
  };
  </script>
  
  <style scoped>
  /* 你可以在这里添加组件的样式 */
  button {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #45a049;
  }
  </style>
  